<div class="container" data-ng-controller="virtualMachineCtrl as vmctrl">
  <div class="block-header">
    <h2>虚拟机</h2>
  </div>

  <div class="card">
    
    <div class="card-body card-padding">
      <div class="btn-demo">
        <button class="btn btn-primary btn-icon-text" ng-click="openModal()"><i class="zmdi zmdi-home"></i> 创建虚拟机</button>
        <!-- <button class="btn btn-primary btn-icon-text" data-swal-success><i class="zmdi zmdi-home"></i> 开机</button>
        <button class="btn btn-primary btn-icon-text" data-swal-warning><i class="zmdi zmdi-home"></i> 关机</button>
        <div class="dropdown-demo" uib-dropdown>
          <button type="button" class="btn btn-primary dropdown-toggle" uib-dropdown-toggle>
            更多
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
              <li><a href="#">重启</a></li>
              <li><a href="#">创建快照</a></li>
              <li><a href="#">绑定IP</a></li>
              <li><a href="#">解除IP</a></li>
              <li><a href="#">修改密码</a></li>
              <li><a href="#">挂载云硬盘</a></li>
              <li><a href="#">卸载云硬盘</a></li>
              <li><a href="#">删除主机</a></li>
          </ul>
        </div> -->
        <button class="btn btn-primary btn-icon-text" ng-click="refresh()"><i class="zmdi zmdi-refresh"></i></button>
      </div>

      <div class="table-responsive">
        <table ng-table="vmTable" class="table table-striped table-vmiddle">
          <tr ng-repeat="w in $data"  ng-click="toggleRightNav(w.vmId)">
            <td data-title="'名称'" sortable="'vmName'">
              {{ w.vmName }}
            </td>
            <td data-title="'Host'" sortable="'hostName'">
              {{ w.hostName }}
            </td>
            <td data-title="'IP'" sortable="'ipAddresses'">
              {{ w.ipAddresses }}
            </td>
            <td data-title="'vCPU(s)'" sortable="'numVCpus'">
              {{ w.numVCpus }}
            </td>
            <td data-title="'内存(GB)'" sortable="'memoryCapacityInBytes'">
              {{ w.memoryCapacityInBytes / (1024 * 1024 * 1024) }}
            </td>
            <td data-title="'CPU使用率'" sortable="'powerState'">
              {{ w.powerState }}
            </td>
            <td data-title="'运行状态'" sortable="'powerState'">
              {{ w.powerState }}
            </td>
            <td data-title="'是否控制台虚拟机'" sortable="'controllerVm'">
              {{ w.controllerVm }}
            </td>
          </tr>
        </table>

      </div>
    </div>

  </div><!-- card -->
  <div class="card nxt-nav-right z-depth-2" ng-class="{'show': navOpen}">
    <!-- header button nav-right -->
    <div class="card-header">
      <div class="nav-right-btn">
        <ul class="actions">
          <li>
            <a href="" ng-click="closeRightNav()">
              <i class="zmdi zmdi-close"></i>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <div class="card-body" ng-class="{active: status(0)}">
      <div class="btn-demo">
        <button class="btn btn-primary btn-icon-text" ng-click="startup()"><i class="zmdi zmdi-power"></i> 开机</button>
        <button class="btn btn-warning btn-icon-text" ng-click="shutdown()"><i class="zmdi zmdi-power"></i> 关机</button>
        <button class="btn btn-warning btn-icon-text" ng-click="restart()"><i class="zmdi zmdi-power"></i> 重启</button>
        <button class="btn btn-primary btn-icon-text" ng-click="pause()"><i class="zmdi zmdi-case"></i> 挂起</button>
        <button class="btn btn-primary btn-icon-text" ng-click="resume()"><i class="zmdi zmdi-case-play"></i> 恢复</button>
        <!-- <button class="btn btn-warning btn-icon-text" ng-click="openModifyPwdModal()"><i class="zmdi zmdi-home"></i> 修改密码</button> -->
      </div>
      <div class="btn-demo">
        <button class="btn btn-primary btn-icon-text" ng-click="openSnapshotModal()"><i class="zmdi zmdi-camera-alt"></i> 创建快照</button>
        <button class="btn btn-primary btn-icon-text" ng-click="openMigrateModal()"><i class="zmdi zmdi-redo"></i> 迁移</button>
        <button class="btn btn-primary btn-icon-text" ng-click="openModal()"><i class="zmdi zmdi-copy"></i> 克隆</button>
        <button class="btn btn-warning btn-icon-text" ng-click="openUpdateModal()"><i class="zmdi zmdi-border-color"></i> 修改配置</button>
        <button class="btn btn-danger btn-icon-text" ng-click="delete()"><i class="zmdi zmdi-delete"></i> 删除</button>
      </div>
    </div>

    <tabset justified="true">
      <!-- 性能面板 -->
      <tab heading="性能">
        <div>
          
        </div>
      </tab>
      <!-- 硬盘列表 -->
      <tab heading="硬盘">
        <div>
          <table ng-table="diskTable" class="table table-striped table-vmiddle">
            <tr ng-repeat="w in $data">
              <td data-title="'名称'" sortable="'diskAddress'">
                {{ w.diskAddress }}
              </td>
              <td data-title="'总容量'" sortable="'diskCapacityInBytes'">
                {{ w.diskCapacityInBytes / (1024 * 1024 * 1024) | number: 3 }} GB
              </td>
              <td data-title="'使用量'" sortable="'usage'">
                {{ w.usage }} GB
              </td>
              <td data-title="'每秒I/O读写量'" sortable="'controller_num_iops'">
                {{ w.stats.controller_num_iops }}
              </td>
              <td data-title="'读写带宽'" sortable="'controller_io_bandwidth_kBps'">
                {{ w.stats.controller_io_bandwidth_kBps }} KBps
              </td>
              <td data-title="'读写延迟'" sortable="'controller_avg_io_latency_usecs'">
                {{ w.stats.controller_avg_io_latency_usecs / 1000 }} ms
              </td>
            </tr>
          </table>
        </div>
      </tab>
      <!-- 网络列表 -->
      <tab heading="网络">
        <div>
          <table ng-table="nicTable" class="table table-striped table-vmiddle">
            <tr ng-repeat="w in $data">
              <td data-title="'名称'" sortable="'name'">
                {{ w.name }}
              </td>
              <td data-title="'适配器类型'" sortable="'adapterType'">
                {{ w.adapterType }}
              </td>
              <td data-title="'MAC地址'" sortable="'macAddress'">
                {{ w.macAddress }}
              </td>
              <td data-title="'IPV4地址'" sortable="'ipv4Addresses'">
                {{ w.ipv4Addresses }}
              </td>
              <td data-title="'IPV6地址'" sortable="'ipv6Addresses'">
                {{ w.ipv6Addresses }}
              </td>
            </tr>
          </table>
        </div>
      </tab>
      <!-- 快照列表 -->
      <tab heading="快照">
        <div>
          <table ng-table="snapshotTable" class="table table-striped table-vmiddle">
            <tr ng-repeat="w in $data">
              <td data-title="'id'" sortable="'snapshotUuid'">
                {{ w.snapshotUuid }}
              </td>
              <td data-title="'名称'" sortable="'snapshotInfo.snapshotName'">
                {{ w.snapshotInfo.snapshotName }}
              </td>
              <td data-title="'创建时间'" sortable="'snapshotInfo.createdTime'">
                {{ w.snapshotInfo.createdTime }}
              </td>
              
              <td data-title="'操作'" sortable="'status'">
                {{ w.status }}
              </td>
            </tr>
          </table>
        </div>
      </tab>
      <!-- 任务列表 -->
      <tab heading="任务">
        <div>
          <table ng-table="taskTable" class="table table-striped table-vmiddle">
            <tr ng-repeat="w in $data">
              <td data-title="'任务'" sortable="'id'">
                {{ w.id }}
              </td>
              <td data-title="'实例'" sortable="'name'">
                <a href="">{{ w.name }}</a>
              </td>
              <td data-title="'完成进度'" sortable="'status'">
                {{ w.status }}
              </td>
              <td data-title="'完成状态'" sortable="'creatingTime'">
                {{ w.creatingTime }}
              </td>
              <td data-title="'创建时间'" sortable="'creatingTime'">
                {{ w.creatingTime }}
              </td>
              <td data-title="'持续时间'" sortable="'creatingTime'">
                {{ w.creatingTime }}
              </td>
            </tr>
          </table>
        </div>
      </tab>
      <!-- 终端控制台 -->
      <tab heading="终端">
      </tab>
    </tabset>

  </div>
  
</div><!-- container -->
